<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hi,欢迎您成为招聘者</title>
    <link rel='stylesheet prefetch' href='/dev/assets/css/distributed/reset.css'>
    <link rel="stylesheet" type="text/css" href="/dev/assets/css/distributed/default.css">
    <link rel="stylesheet" type="text/css" href="/dev/assets/css/distributed/styles.css">
    <link rel="icon" href="/dev/assets/img/geek-job/wanli.jpg" type="image/x-icon">
    <script>
        e();
        function e () {
            // 在这里执行条件检查
            let token = localStorage.getItem("token")
            if (token==null) {
                // 执行页面跳转
                window.location.href = '/dev/views/job/page/login.html';
            }
        }
    </script>
</head>
<body>
<header class="htmleaf-header">
    <h1>Hi,欢迎您成为招聘者 <span>Hi, welcome to be the recruiter </span></h1>
    <div class="htmleaf-links">
        <a class="htmleaf-icon icon-htmleaf-home-outline" href="/dev/views/job/page/login.html" title="职途万里" target="_blank"><span> 职途万里</span></a>
        <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="/dev/views/job/page/login.html" title="返回登陆界面" target="_blank"><span> 返回登录界面</span></a>
    </div>
</header>
<article class="htmleaf-content">
    <!-- multistep form -->
    <form id="msform">
        <!-- progressbar -->
        <ul id="progressbar">
            <li class="active">个人信息填写</li>
            <li>个人详细信息信息</li>
            <li>公司详细信息</li>
        </ul>
        <!-- fieldsets -->
        <fieldset>
            <h2 class="fs-title">创建你的账号</h2>
            <h3 class="fs-subtitle">这是第一步</h3>
            <input type="text" name="x-name" id="uname" placeholder="输入您的姓名"  />
            <div class="col-md-4">
                <span class="init" style="display: none;color: red;font-size: 14px" id="hiddenContent">请至少输入两个字符</span>
            </div>
            <input type="text" name="t-job" id="ujob" placeholder="输入您的职务,真实的职务更容易吸引牛人" />
            <span class="init" style="display: none;color: red;font-size: 14px" id="hiddenNext">请至少输入两个字符</span>

            <input type="button" name="next" id="nextOk" class="next action-button" style="display: none;margin: auto" value="Next" />

        </fieldset>
        <fieldset>
            <h2 class="fs-title">填写公司信息</h2>
            <h3 class="fs-subtitle">填写你所属的公司信息</h3>

            <input type="text" name="company-name" id="company-name" placeholder="请输入您所属的公司名称" />
            <div class="col-md-4">
                <span class="init" style="display: none;color: red;font-size: 14px" id="hidden1">请至少输入两个字符</span>
            </div>
            <input type="text" name="profession" id="profession" placeholder="请输入公司所属行业" />
            <div class="col-md-4">
                <span class="init" style="display: none;color: red;font-size: 14px" id="hidden2">请至少输入两个字符</span>
            </div>

            <input type="button" name="previous" class="previous action-button" value="Previous" style="float: left"/>
            <input type="button" name="next" class="next action-button" id="next2" style="display: none;margin-right: 5px" value="Next"/>

        </fieldset>
        <fieldset>
            <h2 class="fs-title">公司详细信息</h2>
            <h3 class="fs-subtitle">公司信息是保密的，不会被泄露</h3>
            <input type="text" name="Business" id="cName" placeholder="输入您所属公司营业执照上的公司名称" />
            <!-- <input type="text" name="phone" placeholder="电话号码" /> -->
            <textarea name="address" placeholder="公司地址" id="cAdress"></textarea>
            <input type="text" name="PersonSize"  placeholder="人员规模" />
            <input type="button" name="previous" class="previous action-button" style="float: left" value="Previous" />
            <input type="button" name="button" id="subLogin" class="submit action-button" style="display: none;margin-right: 25px" value="提交" />
        </fieldset>
    </form>
</article>

<!--必须先引入jquery.min.js-->
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<!--<script src="/dev/plugins/jquery/jquery-2.1.1.min.js"></script>-->
<!--主导的js包-->
<script src="/dev/plugins/jquery/jquery.easing.min.js" type="text/javascript"></script>
<script>
    var current_fs, next_fs, previous_fs;
    var left, opacity, scale;
    var animating;
    $('.next').click(function () {
        if (animating)
            return false;
        animating = true;
        current_fs = $(this).parent();
        next_fs = $(this).parent().next();
        $('#progressbar li').eq($('fieldset').index(next_fs)).addClass('active');
        next_fs.show();
        current_fs.animate({ opacity: 0 }, {
            step: function (now, mx) {
                scale = 1 - (1 - now) * 0.2;
                left = now * 50 + '%';
                opacity = 1 - now;
                current_fs.css({ 'transform': 'scale(' + scale + ')' });
                next_fs.css({
                    'left': left,
                    'opacity': opacity
                });
            },
            duration: 800,
            complete: function () {
                current_fs.hide();
                animating = false;
            },
            easing: 'easeInOutBack'
        });
    });
    $('.previous').click(function () {
        if (animating)
            return false;
        animating = true;
        current_fs = $(this).parent();
        previous_fs = $(this).parent().prev();
        $('#progressbar li').eq($('fieldset').index(current_fs)).removeClass('active');
        previous_fs.show();
        current_fs.animate({ opacity: 0 }, {
            step: function (now, mx) {
                scale = 0.8 + (1 - now) * 0.2;
                left = (1 - now) * 50 + '%';
                opacity = 1 - now;
                current_fs.css({ 'left': left });
                previous_fs.css({
                    'transform': 'scale(' + scale + ')',
                    'opacity': opacity
                });
            },
            duration: 800,
            complete: function () {
                current_fs.hide();
                animating = false;
            },
            easing: 'easeInOutBack'
        });
    });
    $('.submit').click(function () {
        return false;
    });
</script>

<script>

    $(function () {
        $("#uname").blur(function () {
            let span = $(this).parent().next().children()[0]
            let value = $(this).val()
            let username = $("#uname").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/
            if (reg.test(value)) {
                hiddenContent.style.display="none";
                return true;
            }else {
                hiddenContent.style.display="block";
                return false;
        }
            checkNextButton();
        })
    })
    $(function () {
        $("#ujob").blur(function () {
            let span = $(this).parent().next().children()[0]
            let value = $(this).val()
            let username = $("#ujob").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/
            if (reg.test(value)) {
                hiddenNext.style.display="none";
                return true;
            }else {
                hiddenNext.style.display="block";
                return false;
            }
            checkNextButton();
        });
        function checkNextButton() {

            let unameValue = $("#uname").val();
            let ujobValue = $("#ujob").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/;

            if (reg.test(unameValue) && reg.test(ujobValue)) {
                nextOk.style.display="block"
                 // 显示 "Next" 按钮
            } else {
                nextOk.style.display="none" // 隐藏 "Next" 按钮
            }
        }
        $("#uanme").blur(function (){
            checkNextButton()
        })
        $("#ujob").blur(function (){
            checkNextButton()
        })
    })

//第二个输入框
    $(function () {
        $("#company-name").blur(function () {
            let span = $(this).parent().next().children()[0]
            let value = $(this).val()
            let username = $("#company-name").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/
            if (reg.test(value)) {
                hidden1.style.display="none";
                return true;
            }else {
                hidden1.style.display="block";
                return false;
            }
            checkNextButton();
        })
    })
    $(function () {
        $("#profession").blur(function () {
            let span = $(this).parent().next().children()[0]
            let value = $(this).val()
            let username = $("#profession").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/
            if (reg.test(value)) {
                hidden2.style.display="none";
                return true;
            }else {
                hidden2.style.display="block";
                return false;
            }
            checkNextButton();
        });
        function checkNextButton() {

            let unameValue = $("#company-name").val();
            let ujobValue = $("#profession").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/;

            if (reg.test(unameValue) && reg.test(ujobValue)) {
                next2.style.display="block"
                // 显示 "Next" 按钮
            } else {
                next2.style.display="none" // 隐藏 "Next" 按钮
            }
        }
        $("#company-name").blur(function (){
            checkNextButton()
        })
        $("#profession").blur(function (){
            checkNextButton()
        })
    })
    //第三个输入框
    $(function () {
        $("#cName").blur(function () {
            let span = $(this).parent().next().children()[0]
            let value = $(this).val()
            let username = $("#cName").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/
            if (reg.test(value)) {
                subLogin.style.display="none";
                return true;
            }else {
                subLogin.style.display="block";
                return false;
            }
            checkNextButton();
        })
        function checkNextButton() {
            let cnameValue = $("#cName").val();
            let reg = /^[a-zA-Z\u4e00-\u9fa5]+[·-]?[a-zA-Z\u4e00-\u9fa5]+$/;

            if (reg.test(cnameValue)){
                subLogin.style.display="block"
                // 显示 "Next" 按钮
            } else {
                subLogin.style.display="none" // 隐藏 "Next" 按钮
            }
        }
        $("#company-name").blur(function (){
            checkNextButton()
        })
        $("#profession").blur(function (){
            checkNextButton()
        })
    })


</script>

</body>
</html>